<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="query">
				<el-form-item>
					<el-input v-model="query.keyword" placeholder="角色名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button icon="el-icon-search" type="primary" v-on:click="search">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button icon="el-icon-plus" type="primary" v-on:click="handleAdd">新增</el-button>
				</el-form-item>
				<el-form-item>
					<el-popconfirm icon="el-icon-delete" title="确定删除吗？" @confirm="reallyChecked" style="margin-left: 5px;">
						<el-button slot="reference" type="danger">批量删除</el-button>
					</el-popconfirm>
					<!-- <el-button type="danger" v-on:click="batchDelete">批量删除</el-button> -->
				</el-form-item>

			</el-form>

		</el-col>

		<!--列表-->
		<template>
			<el-table :data="pageInfo.menus" highlight-current-row v-loading="loading" style="width: 100%;"
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" width="100">
				</el-table-column>
				<el-table-column prop="name" label="菜单名" width="200" sortable>
				</el-table-column>
				<el-table-column prop="url" label="路径" width="200" sortable>
				</el-table-column>
				<el-table-column prop="icon" label="ICON" width="200" sortable>
				</el-table-column>
				<el-table-column prop="parent.name" label="父菜单" width="200" sortable>
				</el-table-column>
				<el-table-column label="操作" width="250">
					<template scope="scope">
						<el-button type="success" size="small" @click="handleEdit(scope.row)">编辑</el-button>
						<el-popconfirm icon="el-icon-delete" title="确定删除吗？" @confirm="handleDel(scope.row.id)"
							style="margin-left: 5px;">
							<el-button slot="reference" size="small" type="danger">删除</el-button>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="this.query.pageNumber" :page-sizes="[5, 10, 20, 40]" :page-size=this.query.pageSize
			layout="total, sizes, prev, pager, next, jumper" :total=this.pageInfo.total>
		</el-pagination>

		<el-dialog title="角色信息" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
			:close-on-press-escape="false" @close="cancel">
			<el-form :model="form">
				<el-form-item label="菜单名" :label-width="formLabelWidth">
					<el-input v-model="form.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="路径" :label-width="formLabelWidth">
					<el-input v-model="form.url" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="ICON图标" :label-width="formLabelWidth">
					<el-input v-model="form.icon" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="父菜单" :label-width="formLabelWidth">
					<!-- <el-input v-model="form.parent.id" autocomplete="off"></el-input> -->
					<el-select v-model="form.parent" clearable value-key="id" placeholder="请选择">
						<el-option 
							v-for="item in menus" 
							:key="item.id" 
							:label="item.name" 
							:value="item">
							<span style="float: left">{{item.name }}</span>
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="save">确 定</el-button>
			</div>
		</el-dialog>

	</section>
</template>
<script>
//import NProgress from 'nprogress'
export default {
	data() {
		return {
			authFormVisible: false,
			rolePermission: {  // 授权对象
				permissionSns: []
			},
			loading: false,
			addLoading: false,
			query: {
				pageNumber: 1,
				pageSize: 5,
				keyword: ''
			},
			pageInfo: {
				total: 0,
				menus: []
			},
			selectColumn: [],
			dialogFormVisible: false,
			form: {
				id: null,
				name: '',
				url: '',
				icon:'',
				parent:{
					id:null,
					name:''
				}
			},
			formLabelWidth: '120px',
			menus:[]
		}
	},
	methods: {
		//查询父菜单
		getParentMenu(){
			this.$http.get('/menu/parent')
				.then(res=>res.data).then(res=>{
					console.log(res);
					if(res.code == 200){
						this.menus = res.data.menuParent
					}else{
						this.$message({ message: res.data.message, type: 'danger' });
					}
				})
				.catch(res => {
					this.$message({ message: '网络异常', type: 'error' });
				})
		},
		
		//编辑取消方法
		cancel() {
			this.dialogFormVisible = false
			this.getMenus()
		},
		//编辑按钮触发事件
		handleEdit(row) {
			let temp = Object.assign({}, row);
			if(!temp.parent){
			  temp.parent={
			    id:null,
			    name:""
			  }
			}
			this.form = temp
			this.getParentMenu()
			this.dialogFormVisible = true
		},

		//添加信息按钮触发事件
		handleAdd() {
			this.form = {
				name: '',
				intro: '',
				url: '',
				icon:'',
				parent:{
					id:null,
					name:''
				}
			}
			this.getParentMenu()
			this.dialogFormVisible = true
		},
		//保存信息网络请求
		save() {
			let addForm = this.form
			var parent = addForm.parent
			if(parent == ''){
				addForm.parent = {
          			id : null,
          			name:""
         		}
			}
			this.$http.post('/menu', addForm)
				.then(res => {
					//console.log(res);
					if (res.data.code == 200) {
						this.dialogFormVisible = false
						this.$message({ message: res.data.message, type: 'success' });
						this.getMenus();
					} else {
						this.$message({ message: res.data.message, type: 'danger' });
					}
				}).catch(res => {
					this.$message({ message: '网络异常', type: 'error' });
				})
		},
		reallyChecked() {
			var ids = this.selectColumn.map(x => x.id);
			if (ids.length == 0) {
				this.$message({ message: '未选中消息', type: 'warning' });
				//return ;
			} else {
				this.batchDelete(ids)
			}
		},
		//批量删除
		batchDelete(ids) {
			//var ids = this.selectColumn.map(x => x.id);
			this.$http.patch("/menu", ids)
				.then(res => {
					if (res.data.code == 200) {
						this.$message({ message: '删除成功', type: 'success' });
						this.query.pageNumber = 1
						this.getMenus();
					} else {
						this.$message({ message: '请联系管理员!', type: 'warning' });
					}
				}).catch(res => {
					this.$message({ message: '糟糕糟糕偶买噶，魔法怎么失灵了', type: 'warning' });
				})

		},

		handleSelectionChange(val) {
			this.selectColumn = val
		},
		handleDel(id) {
			console.log(id);
			this.$http.delete("/menu/" + id)
				.then(res => {
					if (res.data.code == 200) {
						this.$message({ message: '删除成功', type: 'success' });
						this.query.pageNumber = 1
						this.getMenus();
					} else {
						this.$message({ message: '请联系管理员!', type: 'danger' });
					}
				}).catch(res => {
					this.$message({ message: '糟糕糟糕偶买噶，魔法怎么失灵了', type: 'warning' });
				})

		},

		search() {
			this.query.pageNumber = 1;
			this.getMenus();
		},
		handleSizeChange(val) {
			this.query.pageSize = val;
			this.query.pageNumber = 1;
			this.getMenus();
		},
		handleCurrentChange(val) {
			this.query.pageNumber = val;
			this.getMenus();
		},
		//获取部门列表
		getMenus() {
			this.$http.put('/menu', this.query)
				.then(res => res.data).then(res => {
					if (res.code == 200) {
						this.pageInfo.menus = res.data.menuList.rows
						this.pageInfo.total = res.data.menuList.total
					}
				})
				.catch(res => {
					console.log(res);
				})
		}
	},
	mounted() {
		this.getMenus();
	}
};

</script>

<style scoped></style>